<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/js/elementui/index.css">

    <style>
        .image {
            width: 50%;
            display: block;
        }
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app">
    <el-row>
        <el-col :span="12"><el-button type="primary" icon="el-icon-plus"
                                      @click="dialogProductVisible = true">添加</el-button></el-col>
        <el-col :span="12"><el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="商品名称">
                <el-input v-model="formInline.name" placeholder="请输入商品名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form></el-col>
    </el-row>


    <div>
       <span color="red">
	    已审核{{audit.auditYes}}件商品，待审核{{audit.auditNo}}件商品，未通过{{audit.auditUn}}件商品
       </span>
    </div>
    <div class="block">
        <el-pagination
                @size-change="handleSizeChange"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="sizes">
        </el-pagination>
    </div>
    <el-table
            :data="tableData.filter(data => !search || data.pName.toLowerCase().includes(search.toLowerCase()))"
            border
            style="width: 100%">
        <el-table-column
                fixed
                prop="pNumber"
                label="商品编号" sortable>
        </el-table-column>
        <el-table-column
                fixed
                prop="pName"
                label="商品名称">
        </el-table-column>
        <el-table-column
                label="商品图片">
            <template slot-scope="scope">
                <el-image
                        style="width: 100px; height: 100px"
                        :src="url+scope.row.pImg"
                        fit="contain"></el-image>
            </template>
        </el-table-column>
        <el-table-column
                prop="pAddtime"
                label="添加时间" sortable>
        </el-table-column>
        <el-table-column
                label="申请状态">
            <template slot-scope="scope">
                <span v-if="scope.row.aStatus==1" class="span" style="background-color: #13ce66;color: white">审核通过</span>
                <span v-if="scope.row.aStatus==0" style="background-color: #907ce5;color: white">待审核</span>
                <span v-if="scope.row.aStatus==-1" style="background-color: #e53b00;color: white">未通过</span>
            </template>
        </el-table-column>
        <el-table-column
                label="保质期" sortable>
            <template slot-scope="scope">
                <span>{{scope.row.pShelflife}}个月</span>
            </template>
        </el-table-column>
        <el-table-column
                prop="pKind"
                label="种类">
        </el-table-column>
        <el-table-column
                prop="companyId"
                label="公司">
        </el-table-column>
        <el-table-column
                fixed="right"
                align="right">
                <template slot="header" slot-scope="scope">
                    <el-input
                            v-model="search"
                            size="mini"
                            placeholder="输入商品名称搜索"/>
                </template>
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        type="success"
                        @click="handleEdit(scope.$index, scope.row)"><i class="el-icon-check"></i></el-button>
                <el-button
                        size="mini"
                        type="warning"
                        @click="handleShow(scope.$index, scope.row)"><i class="el-icon-chat-line-square"></i></el-button>
                <el-button
                        size="mini"
                        type="primary"
                        @click="handleModify(scope.$index, scope.row)"><i class="el-icon-edit"></i></el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog
            :title="productName+product.pName"
            :visible.sync="dialogVisible"
            width="30%">

                <el-card :body-style="{ padding: '0px' }" >
                        <img :src="url+product.pImg" class="image">
                    <div style="padding: 14px;">
                        <p>商品编号：{{product.pNumber}}</p>
                        <p>商品分类：{{product.pEnterprise}}</p>
                        <p>产地：{{product.pLocal}}</p>
                        <p>材质：{{product.pMaterial}}</p>
                        <p>品牌：{{product.pBrand}}</p>
                        <p>价格：{{product.pPrice}}</p>
                        <p>商品质量：{{product.pQuality}}</p>
                        <p>备注：{{product.pRemarks}}</p>
                    </div>
                </el-card>

        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>
    <el-dialog
            :title="productName+product.pName"
            :visible.sync="dialogAuditVisible"
            width="30%">
        <span slot="footer" class="dialog-footer">
            <el-button type="success" @click="auditSuccess">审核通过</el-button>
            <el-button type="danger" @click="auditDanger">不通过</el-button>
            <el-button  @click="dialogAuditVisible = false">取消</el-button>
        </span>
    </el-dialog>
    <el-dialog
            :title="商品信息"
            :visible.sync="dialogProductVisible"
            @close="closeThis">
        <el-form :model="formProduct">
            <el-form-item label="商品编号"  >
                <el-input v-model="formProduct.pNumber" ></el-input>
            </el-form-item>
            <el-form-item label="商品名称" >
                <el-input v-model="formProduct.pName" ></el-input>
            </el-form-item>
            <el-form-item label="图片"  >
                <el-upload
                        class="avatar-uploader"
                        action="http://localhost:8080/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                >
                    <img v-if="formProduct.pImg" :src="url+formProduct.pImg" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="商品价格"  >
                <el-input v-model="formProduct.pPrice" ></el-input>
            </el-form-item>
            <el-form-item label="分类">
                <el-select v-model="formProduct.pEnterprise" placeholder="此选项必填">
                    <el-option
                            v-for="f in categories"
                            :label="f.name"
                            :value="f.name">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="添加时间"  >
                <div class="block">
                    <el-date-picker
                            v-model="formProduct.pAddtime"
                            type="datetime"
                            placeholder="选择日期时间"
                            align="right"
                            :picker-options="pickerOptions">
                    </el-date-picker>
                </div>
            </el-form-item>
            <el-form-item label="公司">
                <el-select v-model="formProduct.companyId" placeholder="此选项必填">
                    <el-option
                            v-for="c in companies"
                            :label="c.companyName"
                            :value="c.companyName">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="产地"  >
                <el-input v-model="formProduct.pLocal" ></el-input>
            </el-form-item>
            <el-form-item label="保质期"  >
                <el-input v-model="formProduct.pShelflife" ></el-input>
            </el-form-item>
            <el-form-item label="品牌"  >
                <el-input v-model="formProduct.pBrand" ></el-input>
            </el-form-item>
            <el-form-item label="商品质量"  >
                <el-input v-model="formProduct.pQuality" ></el-input>
            </el-form-item>
            <el-form-item label="材质"  >
                <el-input v-model="formProduct.pMaterial" ></el-input>
            </el-form-item>
            <el-form-item label="商品种类"  >
                <el-input v-model="formProduct.pKind" ></el-input>
            </el-form-item>
            <el-form-item label="备注"  >
                <el-input v-model="formProduct.pRemarks" ></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogProductVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveProduct">确 定</el-button>
        </div>
    </el-dialog>

    <div class="block">
        <el-pagination
                @current-change="handleCurrentChange"
                :current-page="curr"
                :page-size="pageSize"
                layout="total, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>

</div>
</body>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<script src="/js/elementui/index.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                tableData:null,
                formInline: {
                    name: ''
                },
                curr:1, //当前页数
                total:0, //总条数
                pageSize:5,//每页条数
                url:'http://192.168.31.120/images/',
                product:{
                    pName:'',
                    pImg:'',
                    pNumber:'',
                    pEnterprise:'',
                    pLocal:'',
                    pMaterial:'',
                    pBrand:'',
                    pPrice:'',
                    pQuality:'',
                    pRemarks:''
                },
                dialogVisible:false,
                dialogAuditVisible:false,
                dialogProductVisible:false,
                productName:'商品名称：',
                audit:{
                    auditYes:'',
                    auditNo:'',
                    auditUn:''
                },
                search: '',
                auditId:'',
                formProduct:{
                    id:'',
                    pNumber:'',
                    pName:'',
                    pImg:'',
                    pPrice:'',
                    pEnterprise:'',
                    pAddtime:'',
                    aStatus:'',
                    pStatus:'',
                    companyId:'',
                    pLocal:'',
                    pShelflife:'',
                    pMaterial:'',
                    pBrand:'',
                    pQuality:'',
                    pKind:'',
                    pRemarks:''
                },
                formLabelWidth: '120px',
                companies:null,
                categories:null

            }
        },
        methods: {
            handleAvatarSuccess(res, file) {
                this.formProduct.pImg = res;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            closeThis(){
                this.formProduct={
                    id:'',
                        pNumber:'',
                        pName:'',
                        pImg:'',
                        pPrice:'',
                        pEnterprise:'',
                        pAddtime:'',
                        aStatus:'',
                        pStatus:'',
                        companyId:'',
                        pLocal:'',
                        pShelflife:'',
                        pMaterial:'',
                        pBrand:'',
                        pQuality:'',
                        pKind:'',
                        pRemarks:''
                };
                this.loadPage(this.current,this.pageSize)
            },

            handleModify(index,row){
                this.formProduct=row
                this.dialogProductVisible=true;
            },
            saveProduct(){
                //判断有id进行更新，否则添加
                if (this.formProduct.id == ''){
                    axios.post("/addProduct",this.formProduct)
                        .then(value => {
                            if (value.data.code == 1){
                                this.$message({
                                    message: '添加成功',
                                    type: 'success'
                                });
                                this.dialogProductVisible = false;
                            }
                        });
                }else {
                    axios.put("/modifyProduct",this.formProduct)
                        .then(value => {
                            if (value.data.code == 1) {
                                this.$message({
                                    message: '修改成功',
                                    type: 'success'
                                });
                                this.dialogProductVisible = false;
                            }
                        });
                }

            },
            auditSuccess(){
                axios.put("/auditSuccess",{"id":this.auditId}).then(value => {
                    if (value.data.code == 1){
                        this.loadPage(this.curr,this.pageSize);
                        this.$message({
                            message: '商品审核成功',
                            type: 'success'
                        });
                        this.dialogAuditVisible=false;
                    }
                })
            },
            auditDanger(){
                axios.put("/auditDanger",{"id":this.auditId}).then(value => {
                    if (value.data.code == 1){
                        this.loadPage(this.curr,this.pageSize);
                        this.$message({
                            message: '商品审核不通过',
                            type: 'danger'
                        });
                        this.dialogAuditVisible=false;
                    }
                })
            },
            handleEdit(index, row) {
                this.auditId=row.id
                this.dialogAuditVisible=true;
                console.log(index, row);

            },
            handleShow(index, row) {
                axios.get("/productShow?id="+row.id).then(value => {
                    if (value.data.code == 1){
                        this.product = value.data.data;
                    }
                }).catch(error=>alert("出错啦"))
                this.dialogVisible=true;
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.loadPage(1,val);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.loadPage(val,this.pageSize);
            },
            onSubmit() {
                axios.get("/productName?productName="+this.formInline.name).then(value => {
                    if (value.data.code == 1){
                        this.tableData = value.data.data.records;
                        this.total = value.data.data.total;
                        this.pageSize = value.data.data.size;
                        this.curr = value.data.data.current;
                    }
                }).catch(error=>alert("出错啦"))
            },
            loadPage(current,pageSize){
                this.curr=current;
                //查询商品
                axios.get("/productsAudit?curr="+current+"&pageSize="+pageSize).then(value => {
                    if (value.data.code == 1){
                        this.tableData = value.data.data.records;
                        this.total = value.data.data.total;
                        this.pageSize = value.data.data.size;
                        this.curr = value.data.data.current;
                        this.auditYes = value.data.data.records.auditYes;
                        this.auditNo = value.data.data.records.auditNo;
                        this.auditUn = value.data.data.records.auditUn;
                    }
                }).catch(error=>alert("出错啦"));
                axios.get("/productAudit").then(value => {
                    if (value.data.code == 1){
                        this.audit=value.data.data;
                    }
                }).catch(error=>alert("出错啦"));
            }

        },
        mounted() {
            this.loadPage(1,5);
            //加载公司
            axios.get("/companies").then(value => {
                if(value.data.code == 1){
                    this.companies = value.data.data;
                }
            });
            //加载分类
            axios.get("/category/pid").then(value => {
                if(value.data.code == 1){
                    this.categories = value.data.data;
                }
            });

        }

    });
</script>
</html>